<template>
    <p class="_xs:hidden!">This text is hidden starting from xs viewport size.</p>

    <p class="_sm:hidden!">This text is hidden starting from sm viewport size.</p>

    <p class="_md:hidden!">This text is hidden starting from md viewport size.</p>

    <p class="_lg:hidden!">This text is hidden starting from lg viewport size.</p>

    <p class="_xl:hidden!">This text is hidden starting from xl viewport size.</p>

    <p class="_xxl:hidden!">This text is hidden starting from xxl viewport size.</p>

    <br />

    <p class="_xs:visible!">This text is visible starting from xs viewport size.</p>

    <p class="_sm:visible!">This text is visible starting from sm viewport size.</p>

    <p class="_md:visible!">This text is visible starting from md viewport size.</p>

    <p class="_lg:visible!">This text is visible starting from lg viewport size.</p>

    <p class="_xl:visible!">This text is visible starting from xl viewport size.</p>

    <p class="_xxl:visible!">This text is visible starting from xxl viewport size.</p>

    <br />

    <p class="_xs:visible! _sm:hidden!">This text is visible only on xs viewport size.</p>

    <p class="_sm:visible! _md:hidden!">This text is visible only on sm viewport size.</p>

    <p class="_md:visible! _lg:hidden!">This text is visible only on md viewport size.</p>

    <p class="_lg:visible! _xl:hidden!">This text is visible only on lg viewport size.</p>

    <p class="_xl:visible! _xxl:hidden!">This text is visible only on xl viewport size.</p>

    <p class="_xxl:visible!">This text is visible only on xxl viewport size.</p>
</template>
